<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
	    <style>
	    	img{
				/*图片脱离文档流--文字包含在图片周边*/
				float: left;
				margin-right: 50px;/*图片与文字连接处间隙*/
				margin-bottom: 50px;/*图片与文字连接处间隙*/
			}
			p{
				font-size:16px;/*页面默认字体尺寸*/
				line-height: 20px;/*浮动文字，行高无法设定*/
				word-spacing: 20px;
			}
	    </style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/1.png" alt="图图" width="250px" height="250px">
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui rem quo repellat ex dolor, iusto quibusdam! Assumenda temporibus repudiandae minus tempore? Accusamus illo, maiores dicta tempora et officiis enim placeat! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ab cupiditate debitis reiciendis doloremque perspiciatis, natus velit quod, voluptatum facilis incidunt qui, eum saepe sunt temporibus nostrum modi ducimus consectetur illo. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas illo repudiandae dolores voluptate accusantium! Dolores ipsa asperiores possimus recusandae debitis maiores voluptas, ex quod, incidunt nobis aliquam ullam alias sint?</p>
	</body>
</html>